<template>
  <div class="slide-top">
    <div class="SK-home-slider-content">
      <Carousel :list="bannerList" :wid="590" :hei="285" />
    </div>
    <div class="headline-main">
      <div class="headline-header">
        <div class="section-wrap-outer">
          <div class="section-wrap" style="left: 225px">
            <span title="彬果资讯" class="active">彬果资讯</span>
          </div>
        </div>
      </div>
      <div class="headline-content">
        <div>
          <ul class="comunity-news-lists">
            <li v-for="(news, index) in newsList" :key="news.id">
              <a @click="NewsDetail(news)"
                ><span class="community-new" v-show="index == 0">NEW</span>【{{
                  news.gamename
                }}】{{ news.new_content }}</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "News",
  data() {
    return {
      userInfo: {
        name: "",
        money: 0,
        page: "",
        phone: "",
        sex: "",
        state: "",
        password: "",
      },
    };
  },
  mounted() {
    //   获取轮播图假数据
    this.$store.dispatch("getBannerList");
    this.getUserInfo();
    this.getNewsList();
  },
  methods: {
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    },
    async getNewsList() {
      try {
        await this.$store.dispatch("getNewsData");
      } catch (error) {
        alert(error.message);
      }
    },
    NewsDetail(news) {
      this.$router.push({
        path: "/newsdetail",
        query: { id: news.id, username: this.userInfo.name },
      });
    },
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList.splice(0, 6),
      newsList: (state) => state.community.newsList.splice(0, 6),
    }),
  },
};
</script>

<style></style>
